<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:replace="common::commonHeader(~{::title},~{},~{})">
<title th:text="#{menu-mgt}">menu-mgt</title>
</head>
<body class="container">
	<nav th:replace="common::commonNav"></nav>
	<div class="row">
		<aside class="col-md-2">
			<h1>《《《《《</h1>
		</aside>
		<article class="col-md-8">
			<section>
				<div>
					<h1>+++++++++++++++++++++++++++++++++++++</h1>
					<table id="table1" data-classes="table table-hover "
						data-search="true" data-show-refresh="true"
						data-show-toggle="true" data-show-columns="true"
						data-toolbar="#toolbar"></table>
					<div id="toolbar">
						<div class="btn-group">
							<button class="btn btn-default">
								<i class="glyphicon glyphicon-plus"></i>
							</button>
							<button class="btn btn-default">
								<i class="glyphicon glyphicon-heart" id="heartBtn"></i>
							</button>
							<button class="btn btn-default">
								<i class="glyphicon glyphicon-trash"></i>
							</button>
						</div>
						<div class="form-group">
							<label class="control-label">性别：</label> <label
								class="radio-inline"> <input type="radio" name="sex"
								value="男" />男
							</label> <label class="radio-inline"> <input type="radio"
								name="sex" value="女" />女
							</label>
						</div>
					</div>
				</div>
			</section>
		</article>
		<aside class="col-md-2">
			<h1>》》》》》</h1>
		</aside>
	</div>
	<footer th:replace="common::commonFooter(~{::script})">
		<script th:inline="javascript">
		$(function() {
		    var $table1 = $('#table1').bootstrapTable({
		        columns : [ {
		            field : 'id',
		            title : [[#{id}]],
		            sortable : true
		            }, {
		                field : 'name',
		                title : [[#{name}]]
		            }, {
		                field : 'href',
		                title : [[#{href}]]
		            }, {
		                field : 'level',
		                title : [[#{level}]]
		            }, {
		                field : 'parent',
		                title : [[#{parent}]]
		            }],
		     url : [[@{/menus}]],
		     pagination : true,
		     sidePagination : 'server',
		     pageList : [ 5, 10, 20, 50 ],
		     queryParams : function(params) {
		         params.name = "张三丰";
		         params.sex = $('input[name="sex"]:checked').val();
		         return params;
		        }
		    });
		    $('#heartBtn').click(function() {
		        $table1.bootstrapTable('refresh');
		    });
		});		
		</script>
	</footer>
</body>
</html>